<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义播放器</title>
    <link href="../plugins/videojs711.1/video-js.min.css" rel="stylesheet">
    <script src="../plugins/videojs711.1/video.min.js"></script>
    <script src="../plugins/videojs711.1/lang/zh-CN.js"></script>
    <script src="../hplus/js/jquery.min.js"></script>
    <script src="../js/cookie.js"></script>

</head>
<body>
<p>播放状态:<span id="status" style="font-weight: bold;color: #0e9aef">加载中...</span></p>
    <video
             id="my-player"
             class="video-js"
             controls
             preload="auto"
             poster="http://liuyandeng.gitee.io/gitpages/img/jiucai.jpg"
             data-setup='{}'
             width="1000"
             height="500">

    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
</video>


<script type="application/javascript">
    var options = {
        language: 'zh-CN',
        controlBar: {
            playToggle: true,
            loop: true,
            // 使用children的形式可以控制每一个控件的位置，以及显示与否
            children: [
                {name: 'playToggle'}, // 播放按钮
                {name: 'currentTimeDisplay'}, // 当前已播放时间
                {name: 'progressControl'}, // 播放进度条
                {name: 'durationDisplay'}, // 总时间
                { // 倍数播放
                    name: 'playbackRateMenuButton',
                    'playbackRates': [0.5, 1, 1.5, 2]
                },
                {
                    name: 'volumePanel', // 音量控制
                    inline: false, // 不使用水平方式
                },
                {name: 'pictureInPictureToggle'}, //画中画
                {name: 'FullscreenToggle'} // 全屏
            ]
        }
        // sources: [{
        //     src: 'https://chaoqing.dong-zuida.com/20201224/98_c6bffaa3/index.m3u8',
        //     type: 'application/x-mpegURL'
        // }]
    };
    var player = videojs('my-player', options, function onPlayerReady() {
        videojs.log('Your player is ready!');
        $("#status").html("加载完毕")
        this.play();

        this.on('play', function () {
            $("#status").html("播放中");
        });
        this.on('ended', function () {
            $("#status").html("播放完毕,视频总时长:"+this.duration())

        });
        this.on('pause', function(obj) {
            var time=this.currentTime();
            $("#status").html("暂停,当前播放时长:"+time)
            Cookie.add('admin',time,1)
        });
        this.currentTime(Cookie.get('admin'))//续播
    });
</script>
</body>
</html>
